<script setup>
import ElCardBg from '@/components/ElCardBg.vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted } from 'vue'
import { saveLearning, pageLearning, delLearning, updateLearning, exportExcel } from '@/api/learning'
import ImportExcel from '@/views/Personage/components/ImportExcel.vue'
// 实现下载Blob文件 
import FileSaver from 'file-saver'
const pageParams = ref({
  page: 1,
  limit: 9,
  name: ''
})
const total = ref()
const tableData = ref([])
const pageLearningPath = async () => {
  const res = await pageLearning(pageParams.value)
  tableData.value = res.data.records
  total.value = res.data.total
}
onMounted(() => {
  pageLearningPath()
})
const title = ref('')
const operationDialog = ref(false)
const currentId = ref(null)
const form = ref({
  name: '',
  time: null,
  startTime: '',
  endTime: ''
})

// 关闭弹层
const onClose = () => {
  operationDialog.value = false
  form.value = {}
}

// 操作按钮
const operation = (id) => {
  operationDialog.value = true
  if (id) {
    // 修改回显数据
    title.value = '修改'
    form.value = tableData.value.find(item => item.id === id)
    currentId.value = id
  } else {
    // 新增
    title.value = '新增'
  }
}

// 删除
const del = (id) => {
  ElMessageBox.confirm("您确定要删除吗？", "删除", {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    await delLearning(id)
    ElMessage.success("删除成功!")
    pageLearningPath()
  })
}

// 确认
const handleOk = async () => {
  let message = '修改成功'
  if (currentId.value) {
    // 修改
    await updateLearning(form.value)
  } else {
    await saveLearning(form.value)
    message = '新增成功'
  }
  onClose()
  ElMessage.success(message)
  pageLearningPath()
}

const reset = () => {
  pageParams.value = {
    page: 1,
    limit: 8,
    name: ''
  }
  pageLearningPath()
}

// 导出excel数据
const exportExcelData = async () => {
  // 导出excel数据
  const response = await exportExcel()
  // 下载下来
  FileSaver.saveAs(response.data, '学习路.xlsx') // 下载文件
}

// 导入弹层
const showExcelDialog = ref(false)
</script>

<template>
  <!-- 双向绑定弹层可以直接修改showExcelDialog -->
  <!-- 监听事件渲染 -->
  <ImportExcel v-model="showExcelDialog" @renderView="pageLearningPath" />
  <ElCardBg :title="'学习路'">
    <template v-slot:content>
      <el-row>
        <el-col :span="6" style="margin-right: 10px;">
          <el-form-item label="名称：" prop="">
            <el-input placeholder="请输入名称" v-model="pageParams.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="width: 80px;" @click="pageLearningPath()">
            <i class="iconfont icon-sousuo1" style="margin-right: 6px;font-size: 18px;"></i>
            <span style="margin-right: 30px;">搜索</span>
          </el-button>
          <el-button type="info" style="width: 80px;" @click="reset">
            <i class="iconfont icon-zhongzhi" style="margin-right: 8px;font-size: 14px;"></i>
            <span style="margin-right: 30px;">重置</span>
          </el-button>
        </el-col>
        <el-col :span="13" style="display: flex;justify-content: end;margin-left: 30px;">
          <el-button type="primary" style="width: 100px;" @click="operation(null)">
            <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
            <span style="margin-right: 28px;">新增</span>
          </el-button>
          <el-button type="success" style="margin: 0 10px 0  10px;width: 100px;" @click="showExcelDialog = true">
            <i class="iconfont icon-daoru" style="font-size: 16px;"></i>
            <span style="margin-right: 28px;">导入</span>
          </el-button>
          <el-button type="info" style="width: 100px;" @click="exportExcelData">
            <i class="iconfont icon-daochu" style="font-size: 14px;"></i>
            <span style="margin-right: 28px;">导出</span>
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-row :gutter="0" style="margin-top: 10px;">
        <el-table :data="tableData" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">
          <el-table-column label="序号" prop="id" width="100"></el-table-column>
          <el-table-column label="名称" prop="name" width="200"></el-table-column>
          <el-table-column label="耗时" prop="time" width="100"></el-table-column>
          <el-table-column label="开始时间" prop="startTime" width="150"></el-table-column>
          <el-table-column label="结束时间" prop="endTime" width="150" />
          <el-table-column label="创建时间" prop="createTime" width="200" />
          <el-table-column label="结束时间" prop="updateTime" width="200" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <div v-permissionDirective class="div" style="display: flex;margin-left: 35px;">
                <el-button type="primary" class="centet-icon" @click="operation(scope.row.id)">
                  <i class="iconfont icon-xiugai" style="margin: 0 auto;"></i>
                </el-button>
                <el-button @click="del(scope.row.id)" type="danger"
                  style="display: flex;align-items: center;margin-left: 3px;">
                  <i class="iconfont icon-shanchu" style="margin: 0 auto;"></i>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页条区域 -->
      <el-pagination class="pagination" :default-page-size="9" background :total="total"
        layout="total, prev, pager, next, jumper" v-model:current-page="pageParams.page"
        @current-change="pageLearningPath"></el-pagination>
      <!-- 操作弹层 -->
      <el-dialog :title="title" width="500px" v-model="operationDialog" @close="onClose">
        <el-form-item label="名称:" prop="">
          <el-input placeholder="" v-model="form.name" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="耗时:" prop="">
          <el-input placeholder="" v-model="form.time" style="width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" prop="">
          <el-input placeholder="" v-model="form.startTime" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="结束时间:" prop="">
          <el-input placeholder="" v-model="form.endTime" style="width: 200px;"></el-input>
        </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="onClose">取 消</el-button>
            <el-button size="small" type="primary" @click="handleOk" v-permissionDirective>确 定</el-button>
          </div>
        </template>
      </el-dialog>
    </template>
  </ElCardBg>
</template>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 67px;
}
</style>